<script setup>

import {onMounted, ref} from "vue";
import {doGet, doPost} from "@/util/request.js";
import {useRoute, useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

//路由
const router = useRouter()
//表单对象
const payWayTableData = ref([])
//分页
const totalPage = ref(1)
// 分页参数
const onPageChange = (number) => {
  loadPayWays(number)
}
//商品编码
let productCode = ''
//分页切换
onMounted(() => {
  //获取url中的参数productCode
  productCode = useRoute().query.productCode
  //加载数据页
  loadPayWays(1)
})
//加载数据
const loadPayWays = (pageNo) => {
  const params = {
    pageNo: pageNo,
    pageSize: 10,
    productCode: productCode
  }
  doGet('/payWay/pageList', params).then(resp => {
    if (resp.data.code === 200) {
      payWayTableData.value = resp.data.data.list
      totalPage.value = resp.data.data.page.totalPages
    }
  })
}

//删除
const onDeleteWay = (row) => {
  let data = {
    wayCode: row.wayCode,
    productCode: row.productCode,
    typeCode: row.typeCode
  }
  //确认删除
  ElMessageBox.confirm('确定删除吗？').then(() => {
        doPost('/payWay/delete', data).then(resp => {
          if (resp.data.code === 200) {
            ElMessage.success('删除成功')
            //等待1秒刷新数据
            setTimeout(() => {
              loadPayWays(1)
            }, 500)
          } else {
            ElMessage.error('删除失败')
          }
        })
      }
  ).catch(() => {
    ElMessage.warning('取消删除')
  })
}
const onAddProduct = () => {
  //跳转
  router.push('/index/pay/way/add')
}
</script>

<template>
  <el-button style="margin-left: 20px" type="primary" @click="onAddProduct">新增支付方式</el-button>

  <!------------------------产品支付方式列表------------------------------------->
  <el-table
      ref="userTable"
      :data="payWayTableData"
      border stripe
      style="width: 100%;margin-top: 15px">
    <el-table-column prop="productCode" label="支付产品编码" align="center"/>
    <el-table-column prop="wayCode" label="支付方式编码" align="center"/>
    <el-table-column prop="wayName" label="支付方式名称" align="center"/>
    <el-table-column prop="typeCode" label="支付类型编码" align="center"/>
    <el-table-column prop="typeName" label="支付类型名称" align="center"/>
    <el-table-column prop="payRate" label="费率%" align="center"/>
    <el-table-column prop="sorts" label="排序" align="center"/>
    <el-table-column prop="status" label="状态" align="center"/>
    <el-table-column prop="editTime" label="编辑时间" align="center"/>
    <el-table-column label="操作" align="center">
      <!--编辑&详情&删除按钮-->
      <template #default="scope">
        <el-button size="small" type="danger" @click="onDeleteWay(scope.row)">删除</el-button>

      </template>
    </el-table-column>
  </el-table>
  <!---------------------------------分页--------------------------------------->
  <el-pagination
      background
      size="small"
      layout="prev, pager, next"
      :page-count="totalPage"
      :page-size="20"
      style="margin-top: 15px"
      @current-change="onPageChange"/>
  <!---------------------------------分页--------------------------------------->
</template>

<style scoped>

</style>